<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <style>
    html,
    body,
    #map {
      height: 100%;
    }

    #map {
      background: pink;
    }
  </style>
  <title>一个最简单的例子</title>
  <link rel="stylesheet" href="../library/ol/ol.css">
  <link rel="stylesheet" href="../css/common.css">
</head>

<body>
  <div id="map" class="map"></div>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
  <script src="../library/ol/ol-debug.js"></script>
  <script src="./js/common.js"></script>
  <script>
    window.onload = function () {
      var gaodeMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
        })
      });

      var map = new ol.Map({
        layers: [gaodeMapLayer],
        view: new ol.View({
          center: [120.17, 30.25],
          // projection: 'EPSG:4326',
          // 默認就爲3857
          // projection: 'EPSG:3857',
          zoom: 6
        }),
        target: 'map'
      });
    };
    // var feature = {  
    //   "type": "Feature",  
    //   "geometry": {  
    //     "type": "Point",  
    //     "coordinates": [125.6, 10.1]  
    //   },  
    //   "properties": {  
    //     "name": "Dinagat Islands" ,
    //     "id":"23456"
    //   }  
    // }  
  </script>
</body>